<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">

<title>历史信息</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<link rel="stylesheet" href="css/vivo.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap.min.css">
<link rel="stylesheet" href="js/bootstrap2/css/bootstrap-table.css">
<link rel="stylesheet" href="css/common.css">

<script src="js/jquery-1.11.1.js"></script>
<script src="js/form.js"></script>
<script src="js/bootstrap2/js/bootstrap.min.js"></script>
<script src="js/bootstrap2/js/bootstrap-table.js"></script>
<script src="js/bootstrap2/js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="js/layui-v2.1.5/layui/layui.all.js"></script>
<script type="text/javascript" src="<%=basePath%>js/My97DatePicker/WdatePicker.js"></script>
<style>
body, html {
	height: 100%;
}

th {
	background: #d70b16;
	color: #fff;
	text-align: center;
}

.btn-danger {
	outline: none !important;
	background-image: linear-gradient(to bottom, #ee5f5b, #d70b16);
}

.btn-danger:hover {
	background-color: #d70b16;
}

.panel-body {
	padding: 0px 15px;
}

.panel-heading {
	padding: 5px 15px;
}

#showAllInfo {
	display: inline-block;
	transition: rotate 2s ease;
	-webkit-transition: rotate 2s ease;
	-moz-transition: rotate 2s ease;
	-o-transform: rotate 2s ease;
}

.animateToggle {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}

.panel-title {
	font-size: 14px;
	font-weight: bolder;
}

a:hover {
	cursor: pointer
}

a {
	color: #428bca;
}
</style>

</head>
<body>
	<!-- 历史信息 -->
	<div style="padding: 0px 20px">
		<div class="panel panel-default">
			<div class="panel-body">
				<div>
					<table cellpadding="10" cellspacing="5" class="mytable">
						<tr>
							<td width="70" class="td-right">立项名称</td>
							<td width="200">
								<input name="projectApprovalName" class="toolTip" id="projectApprovalName" value="${requestScope.paStage.projectApprovalName }" />
							</td>
							<td width="70" class="td-right">立项时间</td>
							<td>
								<input name="projectApprovalDate" readonly="readonly" value="<fmt:formatDate value="${requestScope.paStage.projectApprovalDate }" pattern="yyyy-MM-dd" />" id="projectApprovalDate"
									class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd'})" />
							</td>
							<td width="70" class="td-right">立项单位</td>
							<td colspan="3">
								<input name="projectApprovalUnit" id="projectApprovalUnit" value="${requestScope.paStage.projectApprovalUnit }" class="input_name toolTip" />
							</td>
						</tr>
						<tr>
							<td>备注信息</td>
							<td colspan="3">
								<textarea style="width: 80%;" rows="3" maxlength="200" name="projectApprovalRemark" id="projectApprovalRemark" onkeydown="checkMaxInput(this,200)" onkeyup="checkMaxInput(this,200)"
									onfocus="checkMaxInput(this,200)" onblur="checkMaxInput(this,200);resetMaxmsg()">${requestScope.paStage.projectApprovalRemark }</textarea>

							</td>
							<td class="changeTip" style="display: none">变更说明</td>
							<td class="changeTip" style="display: none">
								<textarea id="changeRemark2" style="width: 90%;" rows="3" maxlength="200"></textarea>
								<span style="color: red;">*</span>
							</td>
							<td colspan="2">
								<div>
									<c:choose>
										<c:when test="${empty requestScope.paStage }">
											<button class="btn btn-danger radius my-btn" onclick="saveApproval(0)" type="button">提交</button>
											<button class="btn btn-danger radius my-btn" onclick="saveApproval(1)" type="button">保 存</button>
											<a class="btn btn-default radius" onClick="resetForm();"> 重置 </a>
											<br />
										</c:when>
										<c:otherwise>
											<shiro:hasPermission name="permission:edit">
												<button id="modifyBtn" class="btn btn-danger radius my-btn" onclick="saveApproval(3)" type="button">启用编辑</button>
												<button class="btn btn-danger radius my-btn hidbtn" onclick="saveApproval(2)" type="button">保存修改</button>
												<a class="btn btn-default radius hidbtn" onClick="resetForm();"> 重置 </a>
											</shiro:hasPermission>
										</c:otherwise>
									</c:choose>
								</div>
							</td>
						</tr>
					</table>

					<input type="hidden" id="fkPa" name="fkPa" value="${requestScope.paStage.id }" />
					<!-- 立项id -->
					<input type="hidden" id="entityId_planId" name="planId" value="${paStage.planStage[0].id}" />
					<input type="hidden" id="entityId_designId" name="designId" value="${paStage.designStage[0].id}" />
					<input type="hidden" id="entityId_buildId" name="buildId" value="${paStage.buildStage[0].id}" />
					<input type="hidden" id="entityId_marketId" name="marketId" value="${paStage.marketStage[0].id}" />
					<div id="div_pro" style="display: none">
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>展示</th>
									<th>独立规划</th>
									<th>设计阶段</th>
									<th>建设阶段</th>
									<th>销售阶段</th>
									<th>承接查验阶段</th>
									<th>管理阶段</th>
								</tr>
							</thead>
							<tbody style="background: #eee">
								<tr>
									<td>
										<a id="showAllInfo">
											<img alt="" src="images/xia.png" style="cursor: pointer;">
										</a>
									</td>

									<td>
										<a target="Stage" href="./project/approval/toAddPlanStage_${requestScope.paStage.planStage[0].id }">
											<span>${requestScope.paStage.planStage[0].planName eq ""?"---":requestScope.paStage.planStage[0].planName }</span>
										</a>
										<a target="Stage" href="./project/approval/toAddPlanStage_">
											<c:if test="${empty requestScope.paStage.planStage}">
												<img alt="" src="images/add2.png">
											</c:if>
										</a>
									</td>

									<td>
										<a target="Stage" href="./project/approval/toAddDesignStage_${requestScope.paStage.designStage[0].id }">
											<span>${requestScope.paStage.designStage[0].designName eq ""?"---":requestScope.paStage.designStage[0].designName }</span>
										</a>
										<c:if test="${empty requestScope.paStage.designStage}">
											<a target="Stage" href="./project/approval/toAddDesignStage_">
												<img alt="" src="images/add2.png">
											</a>
										</c:if>
									</td>

									<td>
										<a target="Stage" href="./project/approval/toBuildStage_${requestScope.paStage.buildStage[0].id}">
											<span>${requestScope.paStage.buildStage[0].buildName eq ""?"---":requestScope.paStage.buildStage[0].buildName }</span>
										</a>
										<a target="Stage" href="./project/approval/toBuildStage_">
											<c:if test="${empty requestScope.paStage.buildStage}">
												<img alt="" src="images/add2.png">
											</c:if>
										</a>
									</td>


									<td>
										<a target="Stage" href="./project/approval/toMarketStage_${requestScope.paStage.marketStage[0].id }">
											<span>${requestScope.paStage.marketStage[0].marketName eq ""?"---":requestScope.paStage.marketStage[0].marketName }</span>
										</a>
										<a target="Stage" href="./project/approval/toMarketStage_">
											<c:if test="${empty requestScope.paStage.marketStage}">
												<img alt="" src="images/add2.png">
											</c:if>
										</a>
									</td>
									<td>
										<a target="Stage" href="./project/approval/toContinueStage_${requestScope.paStage.checkStage[0].id }">
											<%-- <span><c:if test="${not empty requestScope.paStage.checkStage}">施工中...</c:if></span> --%>
											<span>${requestScope.paStage.checkStage[0].checkName eq ""?"---":requestScope.paStage.checkStage[0].checkName }</span>
										</a>
										<a target="Stage" href="./project/approval/toContinueStage_">
											<c:if test="${empty requestScope.paStage.checkStage}">
												<img alt="" src="images/add2.png">
											</c:if>
										</a>
									</td>
									<td>
										<a target="Stage" href="./project/approval/toManageStage_${requestScope.paStage.manageStage[0].id }">
											<span>${requestScope.paStage.manageStage[0].manageUnit eq ""?"---":requestScope.paStage.manageStage[0].manageUnit }</span>
										</a>
										<c:if test="${empty requestScope.paStage.manageStage}">
											<a target="Stage" href="./project/approval/toManageStage_">
												<img alt="" src="images/add2.png">
											</a>
										</c:if>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<iframe id="Stage" name="Stage" width="100%" style="height: 550px; display: none;" frameborder="0"></iframe>
				<!-- 展示str -->
				<div id="showAllBasicInfos">
					<div class="panel panel-default" style="margin: 5px;">
						<div class="panel-heading">
							<span class="panel-title">独立规划</span> <span class="panel-title" style="float: right"> <c:if test="${not empty requestScope.paStage}">
									<a onclick="showHistory('${requestScope.paStage.id}','0')">变更记录>></a>
								</c:if>
							</span>
						</div>
						<div class="panel-body">
							<c:if test="${not empty requestScope.paStage.planStage}">
								<table cellpadding="10" cellspacing="5" class="mytable">
									<tr>
										<td width="7%">规划名称</td>
										<td width="18%">${requestScope.paStage.planStage[0].planName}</td>
										<td width="7%">规划时间</td>
										<td width="9%">
											<fmt:formatDate value="${requestScope.paStage.planStage[0].planDate}" pattern="yyyy-MM-dd" />
										</td>
										<td width="7%">占地面积</td>
										<td width="18%">${requestScope.paStage.planStage[0].planArea}</td>
										<td width="7%">用地性质</td>
										<td width="18%">${requestScope.paStage.planStage[0].planLandProperty}</td>
									</tr>
								</table>
							</c:if>
							<c:if test="${empty requestScope.paStage.planStage}">
								<div class="line-style">--暂无数据--</div>
							</c:if>
						</div>
					</div>
					<div class="panel panel-default" style="margin: 5px;">
						<div class="panel-heading">
							<span class="panel-title">设计阶段</span> <span class="panel-title" style="float: right"> <c:if test="${not empty requestScope.paStage}">
									<a onclick="showHistory('${requestScope.paStage.id}','1')">变更记录>></a>
								</c:if>
							</span>
						</div>
						<div class="panel-body">
							<c:if test="${not empty requestScope.paStage.designStage}">
								<table cellpadding="10" cellspacing="5" class="mytable">
									<tr>
										<td width="7%">设计名称</td>
										<td width="18%">${requestScope.paStage.designStage[0].designName}</td>
										<td width="7%">设计时间</td>
										<td width="9%">
											<fmt:formatDate value="${requestScope.paStage.designStage[0].designDate}" pattern="yyyy-MM-dd" />
										</td>
										<td width="7%">设计单位</td>
										<td width="43%" colspan="3">${requestScope.paStage.designStage[0].designUnit}</td>
									</tr>
								</table>
							</c:if>
							<c:if test="${empty requestScope.paStage.designStage}">
								<div class="line-style">--暂无数据--</div>
							</c:if>
						</div>
					</div>
					<div class="panel panel-default" style="margin: 5px;">
						<div class="panel-heading">
							<span class="panel-title">建设阶段</span> <span class="panel-title" style="float: right"> <c:if test="${not empty requestScope.paStage}">
									<a onclick="showHistory('${requestScope.paStage.id}','2')">变更记录>></a>
								</c:if>
							</span>
						</div>
						<div class="panel-body">
							<c:if test="${not empty requestScope.paStage.buildStage}">
								<table cellpadding="10" cellspacing="5" class="mytable">
									<tr>
										<td width="7%">建设名称</td>
										<td width="18%">${requestScope.paStage.buildStage[0].buildName }</td>
										<td width="7%">建设时间</td>
										<td width="9%">
											<fmt:formatDate value="${requestScope.paStage.buildStage[0].buildDate }" pattern="yyyy-MM-dd" />
										</td>
										<td width="7%">建设单位</td>
										<td width="18%">${requestScope.paStage.buildStage[0].buildUnit }</td>
										<td width="7%">监理单位</td>
										<td width="18%">${requestScope.paStage.buildStage[0].superviseUnit }</td>
									</tr>
								</table>
							</c:if>
							<c:if test="${empty requestScope.paStage.buildStage}">
								<div class="line-style">--暂无数据--</div>
							</c:if>
						</div>
					</div>
					<div class="panel panel-default" style="margin: 5px;">
						<div class="panel-heading">
							<span class="panel-title">销售阶段</span> <span class="panel-title" style="float: right"> <c:if test="${not empty requestScope.paStage}">
									<a onclick="showHistory('${requestScope.paStage.id}','3')">变更记录>></a>
								</c:if>
							</span>
						</div>
						<div class="panel-body">
							<c:if test="${not empty requestScope.paStage.marketStage}">
								<table cellpadding="10" cellspacing="5" class="mytable">
									<tr>
										<td width="7%">销售名称</td>
										<td width="18%">${requestScope.paStage.marketStage[0].marketName }</td>
										<td width="7%">销售时间</td>
										<td width="9%">
											<fmt:formatDate value="${requestScope.paStage.marketStage[0].marketDate }" pattern="yyyy-MM-dd" />
										</td>
										<td width="7%">销售单位</td>
										<td width="18%">${requestScope.paStage.marketStage[0].marketUnit }</td>
										<td width="7%">销售经理</td>
										<td width="18%">${requestScope.paStage.marketStage[0].marketAssociate }</td>
									</tr>
								</table>
							</c:if>
							<c:if test="${empty requestScope.paStage.marketStage}">
								<div class="line-style">--暂无数据--</div>
							</c:if>
						</div>
					</div>
					<div class="panel panel-default" style="margin: 5px;">
						<div class="panel-heading">
							<span class="panel-title">承接查验</span> <span class="panel-title" style="float: right"> <c:if test="${not empty requestScope.paStage}">
									<a onclick="showHistory('${requestScope.paStage.id}','6')">变更记录>></a>
								</c:if>
							</span>
						</div>
						<div class="panel-body">
							<c:if test="${not empty requestScope.paStage.checkStage}">
								<table cellpadding="10" cellspacing="5" class="mytable">
									<tr>
										<td width="7%">项目名称</td>
										<td width="18%">${requestScope.paStage.checkStage[0].checkName }</td>
										<td width="7%">查验时间</td>
										<td width="9%">
											<fmt:formatDate value="${requestScope.paStage.checkStage[0].checkDate}" pattern="yyyy-MM-dd" />
										</td>
										<td width="7%">资料</td>
										<td width="43%" colspan="3">${requestScope.paStage.checkStage[0].checkScope }</td>
									</tr>
								</table>
							</c:if>
							<c:if test="${empty requestScope.paStage.checkStage}">
								<div class="line-style">--暂无数据--</div>
							</c:if>
						</div>
					</div>
					<div class="panel panel-default" style="margin: 5px;">
						<div class="panel-heading">
							<span class="panel-title">管理阶段</span> <span class="panel-title" style="float: right"> <c:if test="${not empty requestScope.paStage}">
									<a onclick="showHistory('${requestScope.paStage.id}','4')">变更记录>></a>
								</c:if>
							</span>
						</div>
						<div class="panel-body">
							<c:if test="${not empty requestScope.paStage.manageStage}">
								<table cellpadding="10" cellspacing="5" class="mytable">
									<tr>
										<td width="7%">审批地名</td>
										<td width="18%">${requestScope.paStage.manageStage[0].approvalToponymy }</td>
										<td width="7%">管理时间</td>
										<td width="9%">
											<fmt:formatDate value="${requestScope.paStage.manageStage[0].manageDate }" pattern="yyyy-MM-dd" />
										</td>
										<td width="7%">管理单位</td>
										<td width="18%">${requestScope.paStage.manageStage[0].manageUnit }</td>
										<td width="7%">管理范围</td>
										<td width="18%">${requestScope.paStage.manageStage[0].manageScope }</td>
									</tr>
								</table>
							</c:if>
							<c:if test="${empty requestScope.paStage.manageStage}">
								<div class="line-style">--暂无数据--</div>
							</c:if>
						</div>
					</div>
				</div>
				<!-- 展示end -->
			</div>
			<!-- 列表start -->
			<div style="padding-top: 5px" class="changeTable">
				<!-- 信用信息更改字段列表 -->
				<table id="historyChageTable" style="table-layout: fixed"></table>
			</div>
			<!-- 列表end -->
		</div>
	</div>

	<script type="text/javascript">
		$(function() {
			//如果已经保存过了，则开启只读状态
			<c:if test="${not empty requestScope.paStage }">
			$("td").find("input,textarea").attr("readonly", true);
			$("input[name='projectApprovalDate']").attr("disabled", true);
			</c:if>
			//如果立项id为空，隐藏div_pro（规划、设计、建设、销售、管理阶段）
			var fkPa = $("#fkPa").val();
			if (fkPa == "") {
				$("#div_pro").hide();
			} else {
				$("#div_pro").show();
			}
			$("td a[target='Stage']").click(function() {
				$("#Stage").css("display", "block");
			});

			//点击“展示”,隐藏iframe
			$("#showAllInfo ").click(function() {
				$("#Stage").css('display', 'none');
				$("#showAllBasicInfos").toggle();
				$(this).toggleClass('animateToggle')
			});

			//点击规划、设计、建设、销售、管理阶段，隐藏  showAllBasicInfos
			$("#div_pro tr td:gt(0) a").click(function() {
				$("#showAllBasicInfos").hide();
			});

			//初始化表格,动态从服务器加载数据  
			$("#historyChageTable").bootstrapTable({
				method : "post", //使用get请求到服务器获取数据  
				url : "project/approval/getHistoryList", //获取数据的Servlet地址  
				striped : true, //表格显示条纹  
				pagination : true, //启动分页  
				pageSize : 2, //每页显示的记录数  
				pageNumber : 1, //当前第几页  
				pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表  
				sidePagination : "server", //表示服务端请求  
				contentType : 'application/x-www-form-urlencoded',
				//设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder  
				//设置为limit可以获取limit, offset, search, sort, order  
				queryParamsType : "undefined",
				queryParams : function queryParams(params) { //设置查询参数  
					var param = {
						pageNumber : params.pageNumber,
						pageSize : params.pageSize,
						projectId : '${projectID}',
						type : '5'
					};
					return param;
				},
				columns : [ {
					field : 'createtime',
					title : '修改时间',
					width : '15%',
					formatter : dataFormat
				}, {
					field : 'fieldname',
					title : '修改字段',
					width : '7%'
				}, {
					field : 'changebefore',
					title : '修改前数据',
					width : '25%',
					formatter : showText
				}, {
					field : 'changeafter',
					title : '修改后数据',
					width : '25%',
					formatter : showText
				}, {
					field : 'adduser',
					title : '修改人',
					width : '7%',
				}, {
					field : 'remarks',
					title : '变更说明',
					width : '21%',
					formatter : showText
				} ]
			});

			//鼠标悬浮提示
			toolTip(true);

		});
		//日期格式化
		function dataFormat(value, row, index) {
			return new Date(value).format("yyyy-MM-dd hh:mm:ss");
		}
		//重置表单
		function resetForm() {
			var projectApprovalName = $("#projectApprovalName").val("");
			var projectApprovalDate = $("#projectApprovalDate").val("");
			var projectApprovalUnit = $("#projectApprovalUnit").val("");
			var projectApprovalRemark = $("#projectApprovalRemark").val("");
			$("#projectApprovalName").focus();
		}

		var hi;
		//opt操作字段，0：临时保存；1：新增；2：修改
		function saveApproval(opt) {
			var projectApprovalName = $("#projectApprovalName").val();
			var projectApprovalDate = $("#projectApprovalDate").val();
			var projectApprovalUnit = $("#projectApprovalUnit").val();
			var projectApprovalRemark = $("#projectApprovalRemark").val();
			var fkProjectid = parent.parent.projectID;
			var changeRemark = $("#changeRemark2").val();
			var id = '${requestScope.paStage.id }';//状态为修改时，带着着原id
			var url = "project/approval/add";
			if (opt == 3) {
				var approvalCount = ${approvalCount};
				if(approvalCount == 0 ){
					//解除锁定状态
					var index = layer.confirm('确定开启编辑状态？', {
						offset : '20%',
						shade : 0
					}, function() {
						//去除只读开启按钮编辑
						$("td").find("input,textarea").attr("readonly", false);
						$("input[name='projectApprovalDate']").attr("disabled",
								false).attr("readonly", true);
						$("#modifyBtn").remove();
						$(".hidbtn").removeClass("hidbtn");
						$(".changeTip").show();
						layer.close(index);
					});
				}else{
					layer.msg("此条数据已提交过审批，不能重复提交");
				}
			} else if (projectApprovalName == "") {
				layer.msg("立项名称不能为空");
			} else if (projectApprovalDate == "") {
				layer.msg("日期不能为空");
			} else if (!valLength(50, projectApprovalUnit)) {
				layer.msg("立项单位不能超过50字");
				layer.close(hi);
			} else {
				if (id != "") {
					if (changeRemark == "") {
						layer.msg("变更说明不能为空");
						layer.close(hi);
						return null;
					}
				}
				hi = layer.load(2);
				jQuery.ajax({
					type : "post",
					async : false,
					url : url,
					dataType : "json",
					data : {
						opt : opt,
						id : id,//状态为修改时，带着着原id
						projectApprovalName : projectApprovalName,
						projectApprovalDate : projectApprovalDate,
						projectApprovalUnit : projectApprovalUnit,
						projectApprovalRemark : projectApprovalRemark,
						fkProjectid : fkProjectid,
						changeRemark : changeRemark
					},
					success : function(responseText) {
						if (responseText.success) {
							$("#fkPa").val(responseText.data[0].id);
							$("#div_pro").show();
							layer.alert('保存成功！', {
								offset : '20%',
								shade : 0
							}, function() {
								location.reload();
								layer.close(hi);
							});
						} else {
							layer.alert(responseText.msg, {
								icon : 7
							});
							$("#div_pro").hide();
							layer.closeAll();
						}
					}
				});
			}
		}

		//显示历史列表0：规划  1设计 2建设 3销售 4 管理  
		function showHistory(approvalId, type) {
			var titleName = '历史规划信息';
			if (type == 1) {
				titleName = '历史设计信息';
			} else if (type == 2) {
				titleName = '历史建设信息';
			} else if (type == 3) {
				titleName = '历史销售信息';
			} else if (type == 4) {
				titleName = '历史管理信息';
			}else if (type == 6) {
				titleName = '历史查验信息';
			}
			parent.parent.layer.open({
				type : 2,
				title : titleName,
				shadeClose : false,
				shade : 0.1,
				maxmin : true, //开启最大化最小化按钮
				area : [ '90%', '80%' ],
				//end:parent.updateRoom,//销毁回调
				content : 'project/approval/showHistory/' + approvalId + '/'
						+ type
			});
		}
	</script>
	<script src="js/select2/select2.min.js"></script>
	<script type="text/javascript" src="js/sharefunction.js"></script>
</body>
</html>
